<script>
import { h, inject, ref } from "vue";
import RenderItem from "./RenderItem.vue";

export default {
  props: ['item'],
  setup(props) {

    const ActiveId = inject("ActiveId");
    const SetActiveId = inject("SetActiveId");
    const DargState = inject("DargState");
    const SetDargState = inject("SetDargState");

    const ActiveEvent = function () {
      return ActiveId.value == props.item.field;
    };

    const ActiveClass = function () {
      return ActiveEvent() ? "Active" : "";
    };

    const DargClass = function () {
      if (DargState.value && ActiveEvent()) {
        return "Dark";
      } else {
        return "";
      }
    };

    const MoveObject = ref(null);

    return () =>
      h("div", { class: ["ViewBox"] }, [
        h("div", {
          class: ["ViewMark", ActiveClass(), DargClass()],
          onClick: () => SetActiveId(props.item.field),
          onMouseup: (event) => {
            MoveObject.value = null;
            SetDargState(false);
          },
          onMousedown: (event) => {
            SetDargState(true);
            SetActiveId(props.item.field);
          },
          onMousemove: (event) => {
            if (!DargState.value) return;
            const Height = event.target.clientHeight;
            if (event.offsetY < Height / 2) {
              MoveObject.value = "up";
            } else {
              MoveObject.value = "down";
            }
          },
          onMouseout: () => {
            MoveObject.value = null;
          },
        },
          [h("div", { class: ["MarkLine", MoveObject.value] })]
        ),
        h(RenderItem, { item: props.item }),
      ]);

  }
}
</script>

<style lang="less" scoped>
.ViewBox {
  position: relative;
}

.ViewMark {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

  &:hover {
    border: 1px dotted #0089ff;
  }

  &.Active {
    border: 2px solid #0089ff;
  }

  &.Dark {
    background-color: rgba(0, 0, 0, 0.7);
  }

  .MarkLine {
    width: 100%;
    height: 4px;
    z-index: 999999;
    position: absolute;

    &.up {
      background-color: #0089ff;
      top: -3px;
    }

    &.down {
      background-color: #0089ff;
      bottom: -3px;
    }
  }
}
</style>